<!-- 关联人员 -->
<template>
	<view class="">
		<view class="page" :style="!isData?'display:flex;width: 100vw;height:100vh;align-items:center;justify-content: center;':''">
			<template v-if="isData">
				<view class="list" v-for="(item,index) in dataList" :key="index" @click="onChecker(item, index)">
					<view class="">
						<view class="option">
							<view class="lf">用户部门</view>
							<view class="rl">{{ item.departName }}</view>
						</view>
						<view class="option">
							<view class="lf">用户姓名</view>
							<view class="rl">{{ item.realname }}</view>
						</view>
					</view>
					<view class="icon" v-show="item.isChecker"><u-icon name="checkbox-mark" color="#2979ff" size="22"></u-icon></view>
				</view>
				<!-- 加载更多显示 -->
				<view class=""><u-loadmore :status="statusLoadmore" /></view>
			</template>
			<view v-else>
				<u-empty
					mode="data"
					icon="/static/empty/data.png"
				>
				</u-empty>
			</view>
			<view style="height: 100rpx;"></view>
			<view class="btn">
				<u-button text="保存为个人小组" type="primary" @click="addGroup" style="margin-right: 20rpx;"></u-button>
				<u-button text="确定" type="primary" @click="onConfirm"></u-button>
			</view>
		</view>
		
		<u-toast ref="uToast"></u-toast>
		<addGroupPopup :show.sync="showGroup" :selectedPersonel="SelectedPersonList"/>
	</view>
</template>
<script>
	import http from '@/utils/request'
	import CommonSearch from '../../components/CommonSearch.vue'
	import addGroupPopup from './addGroupPopup.vue'
	export default {
		components: {
			CommonSearch,
			addGroupPopup
		},
		data() {
			return {
				dataList: [] ,// 列表
				isData: true, // 判断是否有数据  true 代表有 false 代表无
				statusLoadmore: 'loadmore', // 通过status设置组件的状态，加载前值为loadmore，加载中为loading，没有数据为nomore
				showGroup: false
			}
		},
		onLoad(options) {
			this.dataList = JSON.parse(JSON.stringify(this.$store.state.selectPerson))
			this.geterpOmcTeamManagerList() // 获取列表
		},
		methods: {
			// 保存为组
			addGroup(){
				if(!this.SelectedPersonList.length){
					this.$refs.uToast.show({
					  message: '请选择小组成员!',
					  type: 'default',
					})
					return
				}
				this.showGroup = true
			},
			// 获取列表
			geterpOmcTeamManagerList () {
				this.statusLoadmore = 'loading' // 加载中
				if (this.dataList && this.dataList.length) {
					this.dataList = this.dataList.map((value, index) => {
						value.isChecker = true
						return value
					})
				}
				this.SelectedPersonList = JSON.parse(JSON.stringify(this.dataList))
				this.statusLoadmore = 'nomore'
			},
			// 点击选中取消选中
			onChecker(item, index) {
				this.dataList[index].isChecker = !this.dataList[index].isChecker // 多选
				// 判断当前列表有没有选中的id值
				this.onIsChecker(this.dataList[index])
			},
			// 用于判断修改当前的id值
			onIsChecker(item) {
				// 判断当前值是否被选中
				if (item.isChecker) {
					// 被选中,直接push
					if (this.SelectedPersonList && this.SelectedPersonList.length) {
						this.SelectedPersonList.push(item)
					} else {
						this.SelectedPersonList = [item]
					}
					
				} else {
					// 当被取消选中,则在id值中去除此id值
					if (this.SelectedPersonList.length == 1) {
						// 当id值只有一个时则直接清除
						this.SelectedPersonList = []
					} else {
						// 当id值是多个的时候
						this.SelectedPersonList.map((val,ind) => {
							if (val.empId == item.empId) {
								this.SelectedPersonList.splice(ind, 1) // 删除当前的id值
							}
						})
					}
				}
			},
			// 去重
			unique (arr) {
				if (arr && arr.length) {
					// 去重
					let newArr = []
					newArr = arr.filter(function (item) {
						return newArr.includes(item.empId) ? "" : newArr.push(item.empId)
					})
					return newArr
				} else {
					return []
				}
			},
			// 点击确定
			onConfirm () {
				this.SelectedPersonList = this.unique(this.SelectedPersonList)
				this.$store.dispatch('actionsSetSelectPerson', this.SelectedPersonList) //设置选择的数据
				uni.navigateBack()
			}
		}
	}
</script>
<style lang="scss" scoped>
.page {
	padding: 0 20rpx 20rpx 20rpx;
	.list{
		border-radius: 10rpx;
		box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.1);
		padding: 12rpx 20rpx 20rpx 20rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
	}
}

// 按钮
.btn{
	position: fixed;
	bottom: 20rpx;
	width: 95%;
	display: flex;
	align-items: center;
}
</style>
